<template>
  <div class="chunk-list-container">
    <el-table :data="tableData" style="width: 100%">
      <!-- 序号 -->
      <el-table-column fixed prop="date" label="日期" width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            routerConfig.limit * (routerConfig.page - 1) + (scope.$index + 1)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="beginPos" label="开始位置" width="120">
      </el-table-column>
      <el-table-column prop="endPos" label="结束位置" width="120">
      </el-table-column>
      <el-table-column prop="beginTime" label="开始时间" width="120">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="300">
        <template slot-scope="{ row }">
          <span style="margin-left: 10px">{{ statusList[row.status] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block" style="margin-top: 20px">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="routerConfig.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="routerConfig.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
</template>

<script>
import * as keyChunkApi from "@/api/keyChunk.js";
export default {
  data() {
    return {
      tableData: [],
      statusList: ["未分配", "等待结果", "结束"],
      total: 0,
    };
  },

  computed: {
    routerConfig() {
      const page = +this.$route.query.page || 1;
      const limit = +this.$route.query.limit || 10;
      return {
        page,
        limit,
      };
    },
  },

  watch: {
    async $route() {
      this.fetchKeyChunks();
    },
  },

  mounted: async function () {
    this.fetchKeyChunks();
  },

  methods: {
    // 请求 密钥块
    async fetchKeyChunks() {
      const { code, data } = await keyChunkApi.findByPage({
        ...this.routerConfig,
      });
      this.tableData = data.data;
      this.total = data.total;
    },

    changeRouter() {
      const query = {
        page: this.routerConfig.page,
        limit: this.routerConfig.limit,
      };
      this.$router.push({
        name: "keyChunk",
        query,
      });
    },

    // 页容量改变
    handleSizeChange(val) {
      this.routerConfig.limit = val;
      this.changeRouter();
    },
    // 页码改变
    handleCurrentChange(val) {
      this.routerConfig.page = val;
      this.changeRouter();
    },
  },
};
</script>

<style>
</style>